<!-- 新增收货人 -->
<template>
  <view class="addreceiving">
    <u-select
      v-model="showAd"
      value-name="id"
      label-name="name"
      mode="mutil-column-auto"
      :list="districtList"
      @confirm="confirm"
    ></u-select>
    <!-- 输入信息 -->
    <view class="add-msg">
      <view class="add-msg-list btm">
        <view>{{ $t("my.consignee") }}</view>
        <input
          type="text"
          v-model="name"
          :placeholder="$t('my.consigneeName')"
        />
      </view>
      <view class="add-msg-list btm">
        <view>{{ $t("my.phone") }}</view>
        <input
          @input="phone = phone.replace(/[^\d]/g, '')"
          maxlength="11"
          type="number"
          v-model="phone"
          :placeholder="$t('my.phoneNumber')"
        />
      </view>
      <!-- <view class="add-msg-list-three btm">
        <view @click="showAd = true">
          <view>{{ $t("my.region") }}</view>
          <input
            type="text"
            v-model="position"
            disabled
            :placeholder="$t('user.area')"
          />
        </view>
        <view>
          <u-icon name="map-fill"></u-icon>
          <view @click="getPosition">{{ $t("my.positioning") }}</view>
        </view>
      </view> -->
      <view class="add-msg-list btm">
        <view>{{ $t("my.detail") }}</view>
        <textarea v-model="details" :placeholder="$t('my.street')" />
      </view>
    </view>
    <!-- 输入信息 -->

    <!-- 设置默认地址 -->
    <view class="default-adress">
      <view>
        <view>{{ $t("my.default") }}</view>
        <view>{{ $t("my.warning") }}</view>
      </view>
      <switch
        :checked="isSetDefaultAdd"
        @change="changeswitch"
        color="rgb(25,190,106)"
        style="transform: scale(0.8)"
      />
    </view>
    <view class="save" @click="onSave">{{ $t("my.save") }}</view>
  </view>

  <!-- <Shenhe v-else-if="shenheStatus == 1"></Shenhe> -->
</template>

<script>
// import Shenhe from "@/components/shenhe/shenhe";
import {
  storeAdminRefundAddressSave,
  storeAdminRefundAddressDefault,
  storeAdminGetAddressInfo
} from "@/api/admin";

export default {
  // components: { Shenhe },
  data() {
    return {
      showAd: false,
      name: "",
      phone: "",
      province_id: "",
      city_id: "",
      district_id: "",
      longitude: "",
      latitude: "",
      position: "",
      details: "",
      isSetDefaultAdd: true,
      districtList: [],
      address_id: ""
    };
  },
  async onLoad(option) {
    this.$utils.hideShareMenu();

    // this.getDistrict();
    uni.setNavigationBarTitle({
      title: this.$t("title.addReceiving")
    });

    if (option.id) {
      this.address_id = option.id;
      this.getDetailsById(option.id);
    }
  },
  methods: {
    // async getDistrict() {
    //   try {
    //     const res = await this.$allrequest.user.get_district({});
    //     res.data.forEach((item) => {
    //       if (item.cityAll) {
    //         item.children = item.cityAll;
    //         item.children.forEach((el) => {
    //           if (el.districtAll) {
    //             el.children = el.districtAll;
    //           }
    //         });
    //       }
    //     });
    //     this.districtList = res.data;
    //   } catch (e) {
    //     //TODO handle the exception
    //   }
    // },
    getDetailsById(id) {
      try {
        // const res = await this.$allrequest.user.address_details({
        //   id,
        // });
        storeAdminGetAddressInfo({
          id
        }).then((res) => {
          if (res.code === 0) {
            this.name = res.data.name;
            this.phone = res.data.mobile;
            this.details = res.data.address;
            this.isSetDefaultAdd = res.data.is_default == 1;

            return;
          }

          this.$utils.toast(res.msg);
        });

        // this.latitude = res.data.latitude;
        // this.longitude = res.data.longitude;
        // this.province_id = res.data.district.province.id;
        // this.city_id = res.data.district.city.id;
        // this.district_id = res.data.district.district.id;
        // this.position =
        //   res.data.district.province.name +
        //   res.data.district.city.name +
        //   res.data.district.district.name;
      } catch (e) {
        //TODO handle the exception
      }
    },
    saveAdd() {
      const params = {
        id: this.address_id,
        name: this.name,
        mobile: this.phone,
        // province_id: this.province_id,
        // city_id: this.city_id,
        // district_id: this.district_id,
        address: this.details
        // longitude: this.longitude + "",
        // latitude: this.latitude + "",
      };

      try {
        storeAdminRefundAddressSave(params).then((res) => {
          if (res.code === 0) {
            if (this.isSetDefaultAdd) {
              this.setDefaultAdd(res.data.address_id);
              this.$utils.showModal("提示", res.msg, false, () => {
                this.$utils.goBack();
              });
            }
            return;
          }

          this.$utils.toast(res.msg);
        });
      } catch (e) {
        //TODO handle the exception
      }
    },
    setDefaultAdd(id) {
      storeAdminRefundAddressDefault({
        id: id ? id : this.address_id
      }).then(() => {});
      // try {
      //   await this.$allrequest.user.address_set_default({
      //     address_id: id ? id : this.address_id,
      //   });
      // } catch (e) {
      //   //TODO handle the exception
      // }
    },
    onSave() {
      if (!this.name) {
        this.$utils.toast(this.$t("my.consigneeName"));
        return;
      }
      if (!this.phone) {
        this.$utils.toast(this.$t("my.phoneNumber"));
        return;
      }
      // if (!this.province_id) {
      //   this.$utils.toast(this.$t("my.chooseRegion"));
      //   return;
      // }
      // // #ifndef APP-PLUS
      // if (!this.latitude) {
      //   this.$utils.toast(this.$t("my.choosePosition"));
      //   return;
      // }
      // // #endif
      if (!this.details) {
        this.$utils.toast(this.$t("my.fillDetail"));
        return;
      }

      this.saveAdd();
    },
    confirm(val) {
      this.province_id = val[0].value;
      this.city_id = val[1].value;
      this.district_id = val[2].value;
      this.position = val.map((item) => item.label).join("");
    },
    async getPosition() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            this.longitude = res.longitude;
            this.latitude = res.latitude;
            this.details = res.name;
            this.getAddress(res.address);
          },
          fail: () => {
            this.$u.toast(this.$t("my.failPosition"));
          }
        });
      }
    },
    getAddress(address) {
      this.$allrequest.classification
        .addressSmart({
          address: address
        })
        .then((res) => {
          if (res.code == 0) {
            this.province_id = res.data.province_id;
            this.city_id = res.data.city_id;
            this.district_id = res.data.region_id;
            this.position = res.data.province + res.data.city + res.data.region;
          }
        });
    },
    changeswitch(val) {
      this.isSetDefaultAdd = val.target.value;
    }
  }
};
</script>

<style lang="scss" scoped>
.addreceiving {
  min-height: 100vh;
  background-color: #f2f2f2;
}

.add-msg {
  background-color: #ffffff;
  border-radius: 0rpx 0rpx 24rpx 24rpx;
  padding-left: 30rpx;

  .btm {
    border-top: 1rpx solid #f0f0f0;
  }

  .add-msg-list {
    padding: 36rpx 0rpx;
    display: flex;
    align-items: flex-start;
    padding-right: 140rpx;

    view {
      width: 140rpx;
      font-size: 28rpx;
      color: #262626;
    }

    input {
      flex: 1;
      font-size: 28rpx;
    }

    textarea {
      flex: 1;
      height: 130rpx;
    }
  }

  .add-msg-list-three {
    padding: 36rpx 31rpx 36rpx 0rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    > view:first-child {
      flex: 1;
      display: flex;
      flex-direction: row;
      padding-right: 30rpx;

      view {
        width: 140rpx;
        font-size: 28rpx;
        color: #262626;
      }

      input {
        flex: 1;
        font-size: 28rpx;
      }
    }

    > view:last-child {
      display: flex;
      align-items: center;

      image {
        width: 20rpx;
        height: 28rpx;
        background-color: red;
      }

      view {
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #262626;
      }
    }
  }
}

.default-adress {
  margin-top: 20rpx;
  padding: 42rpx 20rpx 34rpx 31rpx;
  display: flex;
  background-color: #ffffff;
  border-radius: 24rpx;
  align-items: center;
  justify-content: space-between;

  > view {
    view:first-child {
      font-size: 28rpx;
      color: #262626;
    }

    view:last-child {
      margin-top: 20rpx;
      font-size: 22rpx;
      color: #262626;
    }
  }
}

.save {
  margin: 112rpx auto 0rpx;
  width: 678rpx;
  height: 96rpx;
  border-radius: 48rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  line-height: 96rpx;
  background: linear-gradient(90deg, #f3150c, #f14b0c);
}

.delete {
  margin: 40rpx auto 0rpx;
  width: 676rpx;
  height: 94rpx;
  border-radius: 48rpx;
  border: 1rpx solid #c7c7c7;
  color: #262626;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  line-height: 94rpx;
  background-color: #ffffff;
}
</style>
